<template>
  <div class="component-library">
    <!-- 加载中状态显示 -->
    <div v-if="isLoading" class="loading-state">
      <el-skeleton :rows="5" animated />
    </div>
    
    <!-- 加载完成后显示组件列表 -->
    <template v-else>
      <!-- 使用新的组件库分类显示组件 -->
      <div v-for="category in componentsData.categories" :key="category.key" class="component-group">
        <h4>{{ category.title }}</h4>
        <div
          v-for="component in category.components"
          :key="component.name"
          class="component-item"
          draggable="true"
          @dragstart="handleDragStart($event, component)"
        >
          <el-icon><component :is="component.icon || 'Menu'" /></el-icon>
          <span>{{ component.text }}</span>
        </div>
      </div>
    </template>

    <!-- 底部添加自定义组件按钮 -->
    <div class="add-custom-component">
      <el-button 
        type="primary" 
        size="small" 
        @click="openComponentImporter"
        :icon="Plus"
      >添加自定义组件</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'; // 引入所有 Element Plus 图标
import { useDesignStore } from '../stores/designStore'; // 引入 Store
import { Setting, Plus } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import { componentCategories, componentMap, initializeComponentLibrary } from '@/components/library'; // 正确导入组件库

// 使用 Store
const designStore = useDesignStore();

// 加载状态管理
const isLoading = ref(true);

// 组件接口
interface ComponentDefinition {
  name: string;
  type: string;
  text: string;
  icon?: string;
}

// 组件数据，存储初始化后的组件信息
const componentsData = reactive({
  categories: [] as any[],
  components: new Map()
});

// 初始化组件库数据
const initializeComponentData = async () => {
  try {
    isLoading.value = true;
    
    // 从全局初始化状态获取组件库数据
    componentsData.categories = componentCategories;
    componentsData.components = componentMap;
    
    // 如果组件库还未初始化或组件数为0，等待初始化完成
    if (componentsData.categories.length === 0 || componentsData.components.size === 0) {
      console.log('[LeftPanel] 组件库尚未初始化，开始初始化...');
      
      // 调用初始化方法
      const result = await initializeComponentLibrary();
      
      // 更新本地数据
      componentsData.categories = result.componentCategories;
      componentsData.components = result.componentMap;
      
      console.log('[LeftPanel] 组件库初始化完成，发现分类:', componentsData.categories.length);
      console.log('[LeftPanel] 组件库初始化完成，发现组件:', componentsData.components.size);
    } else {
      console.log('[LeftPanel] 使用已初始化的组件库数据');
    }
  } catch (error) {
    console.error('[LeftPanel] 初始化组件库失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// 页面挂载时初始化组件库
onMounted(async () => {
  await initializeComponentData();
});

// 处理拖拽开始事件
const handleDragStart = (event: DragEvent, component: ComponentDefinition) => {
  // 调用 store action 设置拖拽状态
  designStore.setDraggingState(true);
  console.log('[LeftPanel DragStart] Setting isDraggingComponent to true.');

  if (event.dataTransfer) {
    // 获取组件配置
    const config = componentsData.components.get(component.name);
    if (!config) {
      console.error('找不到组件配置:', component.name);
      return;
    }

    // 获取实际组件类型，添加ew-前缀
    const actualType = 'ew-' + component.name;

    // 准备拖拽数据，包含 action 和组件定义
    const dragData = {
      action: 'add',
      type: actualType, // 带前缀的组件名
      label: component.text,
      name: component.name,
      defaultProps: {
        datas: config.setStyle || {} // 确保包含datas作为包装对象
      }
    };
    
    // 将包含 action 的数据存入 dataTransfer
    event.dataTransfer.setData('application/json', JSON.stringify(dragData));
    event.dataTransfer.effectAllowed = 'copy'; // 设置效果为复制
    console.log('[LeftPanel DragStart] Setting dataTransfer:', dragData);
  }
};

// 打开组件导入对话框
const openComponentImporter = () => {
  ElMessageBox.alert(
    `组件导入功能正在开发中，将支持从以下路径导入组件：
    - 项目根目录的 dynamic-components 文件夹
    - 用户选择的本地 .vue 文件
    
    您也可以直接将 .vue 组件文件放入 dynamic-components 文件夹，系统将自动检测并加载。`, 
    '导入自定义组件', 
    {
      confirmButtonText: '确定',
      type: 'info',
    }
  );
};

// 将所有图标注册到 Vue 实例，以便在模板中使用
// 注意：在实际大型项目中，可能需要按需引入图标
const icons = ElementPlusIconsVue;

</script>

<style scoped>
.component-library {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto; /* 添加垂直滚动 */
  min-width: 160px;
}

.loading-state {
  padding: 10px;
}

.component-group {
  margin-bottom: 15px;
}

.component-group h4 {
  font-size: 14px;
  color: #303133;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.component-item {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  cursor: grab;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.component-item:hover {
  background-color: #f5f7fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.component-item .el-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #409eff;
}

.component-item span {
  font-size: 13px;
  color: #606266;
}

.add-custom-component {
  margin-top: auto;
  padding: 15px 0;
  text-align: center;
  border-top: 1px solid #eee;
}

.manage-btn {
  padding: 4px;
  font-size: 12px;
}
</style> 